<template>
<el-container v-if="this.judgeIdentity()!==0">
  <el-header class="admin"  style="height: 150px;">
    <div class="item" style=" background-image: linear-gradient(to left, #FFC312, #EE5A24, #FFC312);
    background-size: 200%;
    transition: 0.6s;" @click="toStu">
      <div class="dataDis" >
        <p>学生总人数</p>
        <p>{{stuCount}}</p>
      </div>
      <div class="iconImg" style=""><img src="@/assets/image/统计图.png" width="80px"></div>
    </div>
    <div class="item" style="background-image: linear-gradient(to left, #C4E538, #009432, #C4E538);
    background-size: 200%;
    transition: 0.6s;"  @click="toRoom">
      <div class="dataDis">
        <p>空宿舍数</p>
        <p>{{emptyRoom}}</p>
      </div>
      <div class="iconImg"><img src="@/assets/image/统计图.png" width="80px"></div></div>
    <div class="item" style=" background-image: linear-gradient(to left, #12CBC4, #0652DD, #12CBC4);
    background-size: 200%;
    transition: 0.6s;"  @click="toRepair">
      <div class="dataDis threedata">
        <p>报修申请统计</p>
        <p>今日新增：{{todayRepair}}</p>
        <p>总共：{{ repairTotal }}</p>
      </div>
      <div class="iconImg"><img src="@/assets/image/统计图.png" width="80px"></div></div>
    <div class="item" style="
    background-image: linear-gradient(to left, #FDA7DF, #9980FA, #FDA7DF);
    background-size: 200%;
    transition: 0.6s;"  @click="toAbsent">
      <div class="dataDis threedata">
        <p>缺勤申请统计</p>
        <p>今日新增：{{todayAbsent}}</p>
        <p>总共：{{ absentTotal }}</p>
      </div>
      <div class="iconImg"><img src="@/assets/image/统计图.png" width="80px"></div></div>
  </el-header>

  <el-main class="admin_main">
   <div class="main_item" id="mn"></div>
   <div class="main_item">
    <weather></weather>
    <mycalender></mycalender>
   </div>
</el-main>
  <el-footer style="text-align: center;"></el-footer>
</el-container>


</template>

<script>
import * as echarts from 'echarts';
import weather from '@/components/weather.vue'
import mycalender from '@/components/Mycalender';
import request from '@/utils/request';
export default {
  components:{
    weather,
    mycalender
  },
  data(){
    return{
      value:new Date(),
      stuCount:null,
      boyNum:1,
      girlNum:1,
      emptyRoom:20,
      repairTotal:20,
      todayRepair:2,
      absentTotal:15,
      todayAbsent:2,
      myEcharts:"",
      stuNumdata:[{
        value:1,
        name:'男'
      },
      {
        value:1,
        name:'女'
      }
    ],
      option :{
        title: {
        text: '男女比例'
       },
        series: [
          {
            type: 'pie',
            data:[],
            label: {//展示文本设置
               normal: {
                   show: true,
                   formatter: "{b} : {c}人",//视觉引导线内容格式器,{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
               },
               emphasis: {    //文本样式
                   show: true,    //展示
                   textStyle: {    //文本样式
                       fontSize: '16',
                       fontWeight: '600',
                   }
               }
           }
          }
        ]
      }
    }
  },
  created(){
    if(this.judgeIdentity()!=0){
      this.getStu()
      this.getEmptyRoom()
      this.getRepairadd()
      this.getRepairtotal()
      this.getAbsentAdd()
      this.getAbsenttotal()
      }
   
  },
  mounted() {
    if(this.judgeIdentity()!=0){
      this.createcharts()
    }
},
watch: {
    //观察option的变化
    option: {
      handler(newVal, oldVal) {
        if (this.myEcharts) {
          if (newVal) {
            this.myEcharts.setOption(newVal);
          } else {
            this.myEcharts.setOption(oldVal);
          }
        } else {
          this.createEcharts();
        }
      },
      deep: true //对象内部属性的监听，关键。
    }
  },

methods:{
        toStu(){
          this.$router.replace({path: "/stuinfo"});
        },
        toRoom(){
          this.$router.replace({path: "/roominfo"});
        },
        toRepair(){
          this.$router.replace({path: "/repairInfo"});
        },
        toAbsent(){
          this.$router.replace({path: "/absentRoomInfo"});
        },
        judgeIdentity(){
          var idt= window.localStorage.getItem('identity');
          console.log(idt);
          return parseInt(idt);
        },
        createcharts(){
          const chartDmo = document.getElementById("mn");
          this.myEcharts = echarts.init(chartDmo);
          this.option.series[0].data=this.stuNumdata
          this.myEcharts.setOption(this.option);
        },
        async getStu(){
          request.get("/student/stuCount").then(res=>{
            if(res.code==="1"){
              console.log(res.data)
              this.girlNum=parseInt(res.data.girlCount)
              this.boyNum=parseInt(res.data.boyCount)
              console.log(this.girlNum);
              console.log(this.boyNum);
              const charData = [{
                    value:this.boyNum,
                    name:'男'
                  },
                  {
                    value:this.girlNum,
                    name:'女'
                  }
                ]
              
              this.stuCount=this.girlNum+this.boyNum
              this.stuNumdata=charData
              this.option.series[0].data=this.stuNumdata
              this.myEcharts.setOption(this.option);
            }
          })
        },
        async getEmptyRoom(){
          request.get("/sturoom/getEemptyRoom").then(res=>{
            if(res.code === "1"){
              this.emptyRoom=parseInt(res.data);
            }
          })
        },
        async getRepairadd(){
          request.get("/repair/todayadd").then(res=>{
            if(res.code === "1"){
              this.todayRepair=parseInt(res.data);
            }
          })
        },
        async getRepairtotal(){
          request.get("/repair/total").then(res=>{
            if(res.code === "1"){
              this.repairTotal=parseInt(res.data);
            }
          })
        },

        async getAbsentAdd(){
          request.get("/absent/todayadd").then(res=>{
            if(res.code === "1"){
              this.todayAbsent=parseInt(res.data);
            }
          })
        },
        
        async getAbsenttotal(){
          request.get("/absent/total").then(res=>{
            if(res.code === "1"){
              this.absentTotal=parseInt(res.data);
            }
          })
        },
       
    }
}
</script>
<style scoped>
  .admin {
    margin-top:20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .admin_main {
    margin-top:10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .main_item {
    height: 500px;
    flex:0 0 48%;
   
    margin-left: calc(4% / 3);
    margin-bottom: calc(4% / 3);
  }
  .item{
    border-radius: 10px;
    justify-content: space-between;
    display: flex;
    flex:0 0 22%;
    height: 100px;
    text-align: center;
    line-height:30px;
    margin-left: calc(4% / 3);
    margin-bottom: calc(4% / 3);
    background-color: #2ca75b;
  }
  .item div {
    margin-top: 10px;
    flex:48%;
    width: 100px;
    height: 70px;
  }
  .dataDis {
    color: aliceblue;
    line-height: 8px;
    text-align: left;
  }
  .threedata {
    margin-top: 0px;
  }
</style>

